<template>
    <div class="header">
        <div class="top">
            <div class="left">
                <img src="@/assets/images/logo.png" alt=""/>
                越城区滨海新区投资项目全生命周期服务管理平台
            </div>
            <div class="right">
                <div>
                    <span class="iconfont icon-wode"></span>
                    欢迎您：管理员
                </div>
                <a :href="baseURL+'/index.html'">业务平台</a>
                <div><a :href="baseURL">退出登录</a></div>
            </div>
        </div>
        <!-- <div class="nav">
                <div style="color:#fff; background-color: #0d8af6;">首页</div>
                <div>审批监管</div>
                <div>项目问题</div>
                <div>项目计划</div>
                <div>项目进度</div>
                <div>项目合同</div>
                <div>工程变更</div>
                <div>综合验收</div>
                <div>评价移交</div>
                <div>项目库</div>
            </div> -->
        <div class="bottom">
            <div class="items">
                <a :href="baseURL+'/index.html?op=1'">
                    <div class="item">
                        <div class="icon iconfont icon-shenbao"></div>
                        <div class="title">项目申报</div>
                    </div>
                </a>
                <a :href="baseURL+'/index.html?op=2'">
                    <div class="item">
                        <div class="icon iconfont icon-shenbao"></div>
                        <div class="title">计划申报</div>
                    </div>
                </a>
                <a :href="baseURL+'/index.html?op=3'">
                    <div class="item">
                        <div class="icon iconfont icon-xiangmujindu"></div>
                        <div class="title">进度上报</div>
                    </div>
                </a>
                <a :href="baseURL+'/index.html?op=4'">
                    <div class="item">
                        <div class="icon iconfont icon-renyuanbiangengshenqing-06"></div>
                        <div class="title">问题交办</div>
                    </div>
                </a>
                <a :href="baseURL+'/index.html?op=5'">
                    <div class="item">
                        <div
                            class="icon iconfont icon-zhibaoyanshoushenqingliucheng-05"
                        ></div>
                        <div class="title">综合验收</div>
                    </div>
                </a>
                <a :href="baseURL+'/index.html?op=6'">
                    <div class="item">
                        <div class="icon iconfont icon-xiangmu"></div>
                        <div class="title">项目库</div>
                    </div>
                </a>
                <a :href="baseURL+'/index.html?op=1-1'">
                    <div class="item">
                        <div class="icon iconfont icon-shenpi"></div>
                        <div class="title">项目联审</div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            baseURL:baseURL
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {},
    beforeCreate() {
    }, //生命周期 - 创建之前
    created() {
    }, //生命周期 - 创建完成（可以访问当前this实例）
    beforeMount() {
    }, //生命周期 - 挂载之前
    mounted() {
    }, //生命周期 - 挂载完成（可以访问DOM元素）
    beforeUpdate() {
    }, //生命周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁完成
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
@import url('@/assets/fonts/iconfont.css');

.header {
    padding-top: 20px;
    padding-bottom: 30px;
    background-color: #f4f4f4;

    .top {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        .left {
            font-size: 24px;
            font-weight: bold;
            color: #0d8af6;

            img {
                width: 57px;
                height: 50px;
                margin-right: 10px;
                vertical-align: middle;
            }
        }

        .right {
            display: flex;
            color: #fff;
            font-size: 12px;
            text-align: center;

            div,
            a {
                height: 30px;
                line-height: 30px;
                background-color: #0d8af6;
                border-radius: 5px;
                margin-left: 8px;
                padding: 0 10px;
                cursor: pointer;
            }

            a {
                text-decoration: none;
                color: #fff;
            }
        }
    }

    // .nav{
    //     width: 1200px;
    //     margin: 15px auto;
    //     display: flex;
    //     justify-content: space-between;
    //     div{
    //         width: 80px;
    //         height: 33px;
    //         color: #2d8edb;
    //         font-size: 14px;
    //         text-align: center;
    //         line-height: 33px;
    //         border-radius: 5px;
    //     }
    // }
    .bottom {
        height: 158px;
        background-color: #0088fe;
        margin-top: 20px;

        a {
            text-decoration: none;
        }

        .items {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;

            .item {
                width: 80px;
                height: 100%;
                text-align: center;
            }

            .icon {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: #fff;
                margin-left: 12px;
                margin-top: 30px;
                margin: 30px 0 10px 12px;
                color: #0088fe;
                font-size: 30px;
                text-align: center;
                line-height: 50px;
            }

            .title {
                font-size: 14px;
                font-weight: bold;
                color: #fff;
                width: 80px;
                height: 30px;
                line-height: 30px;
                // border-right: 1px solid #fff;
            }
        }
    }
}
</style>
